<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="css/four.css">
  <link rel="stylesheet" href="./fonts/iconfont.css">
  <!-- <script src="js/echarts.min.js"></script> -->
  <script src="js/jquery.min.js"></script>
  <script src="js/macarons.js"></script>
  <!-- <script src="js/china.js"></script> -->
  <script src="js/countUp.js"></script>
</head>

<body>
  <nav class="main-nav">
    <h1 style="color: #8B4513; font-size: 24px;">古籍展示</h1>
    <div class="nav-buttons">
      <button class="nav-button" onclick="window.location.href='../index.html'">主界面</button>
      <button class="nav-button" onclick="window.location.href='../第一界面/1界面.html'">第一界面</button>
      <button class="nav-button" onclick="window.location.href='../第二界面/关系图.html'">第二界面</button>
      <button class="nav-button" onclick="window.location.href='./人界面.html'">第三界面</button>
    </div>
  </nav>
  <div class="first-screen root-wrap">
    <header>
      <img src="./img/cnonix.png" />
      <div class="title_img">
        <img src="img/title_left_img.png" alt="">
      </div>
      <!-- <span class="month-tip">2017年1月</span> -->
    </header>
    <div class="main clearfix">
      <!-- 同类图书 -->
      <div class="aside-left fl">
        <h3>同类农书</h3>
        <ul class="clearfix">
        </ul>
      </div>
      <div class="middle_con fl">
        <div class="middle_top">
          <div class="con_left fl">
          </div>
          <div class="con_right fl clearfix">
            <dl class="clearfix">
              <dt>书籍标签</dt>
              <dd class="clearfix">
                <ul class="bookLabel clearfix"></ul>
              </dd>
            </dl>
            <dl class="clearfix">
              <dt class="clearfix">主题词</dt>
              <dd class="clearfix">
                <ul class="themaWords clearfix"></ul>
              </dd>
            </dl>

          </div>
          <div class="con_link">
            <h3>内容提要</h3>
            <div class="link_title  link_con">

            </div>
          </div>
          <div class="con_link">
            <h3>本书目录</h3>
            <ul class="link_ul">
              <!-- <li>1.序</li>
                <li>2.围城</li>
                <li>3.围城</li>
                <li>4.记钱钟书与围城——杨绛</li> -->
            </ul>
          </div>
          <div class="con_link">
            <h3>作者简介</h3>
            <div class="link_title link_author"></div>
          </div>

        </div>

        <div class="middle_button">
          <div class="button_left">
            <h3>高频词</h3>
            <div class="button_con">
              <div class="container purchase claefix">
              </div>
            </div>
          </div>
          <div class="button_right">
            <h3>中心主题</h3>
            <div class="button_con">
              <div class="container jieyue claefix">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="aside-right clearfix fl">
        <div class="con_top clearfix">
          <h3>书籍概览</h3>
          <div class="aside_con clearfix">
          </div>

        </div>

      </div>
    </div>
    <div class="main-bottom">
      <span class="line1"></span>
      <span class="line2"></span>
      <span class="line3"></span>
    </div>
  </div>
  <script src="js/four.js"></script>
</body>

</html>

<style>
  .main-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: rgba(255, 250, 240, 0.85);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: flex;
    align-items: center;
    padding: 0 40px;
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(212, 180, 131, 0.5);
  }

  .nav-buttons {
    display: flex;
    gap: 25px;
    margin-left: auto;
  }

  .nav-button {
    padding: 12px 28px;
    border-radius: 6px;
    background: transparent;
    color: #4A4A4A;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(74, 74, 74, 0.3);
    display: flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(8px);
  }

  .nav-button:hover {
    background: rgba(74, 74, 74, 0.1);
    color: #4A4A4A;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  }
</style>